<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Responsive Bootstrap 4 Admin Template">
    <meta name="author" content="Bootlab">

    <title>demo_凭证_单据_detail</title>

    <link href="css/classic.css" rel="stylesheet">
    <link href="css/ext.css" rel="stylesheet">
</head>

<body>
    <div class="wrapper">

        <nav class="sidebar">
            <div class="sidebar-content ">
                <a class="sidebar-brand" href="index.html">
                    <i class="align-middle" data-feather="command"></i>
                    <span class="align-middle">供应链金融平台</span>
                </a>

                <ul id='sidebar-menu' class="sidebar-nav">
                    <script id="script_menu" type="text/x-handlebars-template">

                        {{#each menuitems}}
                            <li class="sidebar-header">
                                {{title}}
                            </li>
                            {{#if groups}}
                                {{#each groups}}
                                    <li class="sidebar-item" {{#if ../actived }} active {{/if}}>

                                        <a href="{{href}}" data-toggle="collapse" class="sidebar-link 	{{#if this.actived}} {{else}} collapsed {{/if}}">
                                            <i class="align-middle" data-feather={{icon}}></i> <span class="align-middle">{{title}}</span>
                                        </a>

                                        {{#if items}}
                                            <ul id="{{id}}" class="sidebar-dropdown list-unstyled collapse  	{{#if this.actived}} show {{else}} {{/if}}">
                                                {{#each items}}

                                                    <li class="sidebar-item {{#if actived}} active {{/if}}">
                                                        <a class="sidebar-link " href={{href}}>{{title}}</a>
                                                    </li>
                                                {{/each}}
                                            </ul>
                                        {{/if}}
                                    </li>
                                {{/each}}
                            {{/if}}
                        {{/each}}
                    </script>
                </ul>

                <div class="sidebar-bottom d-none d-lg-block">
                    <div class="media">
                        <img class="rounded-circle mr-3" src="img/avatar.jpg" alt="Chris Wood" width="40" height="40">
                        <div class="media-body">
                            <h5 class="mb-1 text-white">Chris Wood</h5>
                            <div class="text-light">
                                <i class="fas fa-circle text-success"></i> Online
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </nav>

        <div class="main">
            <nav class="navbar navbar-expand navbar-light bg-white">
                <a class="sidebar-toggle d-flex mr-2">
                    <i class="hamburger align-self-center"></i>
                </a>

                <form class="form-inline d-none d-sm-inline-block">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search projects" aria-label="Search">
                </form>

                <div class="navbar-collapse collapse">

                </div>
            </nav>

            <main class="content">
                <div class="container-fluid p-0">



                    <div class="row">
                        <div class="col-md-8 col-xl-9">

                            <div class="card">
                                <div class="card-header">
                                    <div class="card-actions float-right">
                                        <small class="float-right text-navy">FP111010231231</small>
                                    </div>
                                    <h5 class="card-title mb-0"> <a href="#" class="badge badge-primary mr-1">发票</a></h5>

                                </div>
                                <div class="card-body pt-0">

                                    <div class="media">
                                        <div class="media-body">
                                            <div class="form-row">
                                                <div class="form-group col-4">
                                                    <label class="form-label">发票金额</label>
                                                    <input type="text" class="form-control" placeholder="Disabled input" disabled value='9,010,000'>
                                                </div>
                                                <div class="form-group col-4">
                                                    <label class="form-label">发票销售方</label>
                                                    <input type="text" class="form-control" placeholder="Disabled input" disabled value='美亚商旅'>
                                                </div>
                                                <div class="form-group col-4">
                                                    <label class="form-label">发票购买方</label>
                                                    <input type="text" class="form-control" placeholder="Disabled input" disabled value='华为'>
                                                </div>

                                            </div>
                                            <div class="form-row">
                                                <div class="form-group col-4">
                                                    <label class="form-label">发票日期</label>
                                                    <input type="text" class="form-control" placeholder="Disabled input" disabled value='2021-02-01'>
                                                </div>
                                                <div class="form-group col-4">
                                                    <label class="form-label">付款日期</label>
                                                    <input type="text" class="form-control" placeholder="Disabled input" disabled value='2021-02-01'>
                                                </div>
                                                <div class="form-group col-4">
                                                    <label class="form-check col-4">


                                                        发票状态

                                                    </label>
                                                    <select class="form-control select2">
                                                        <option value="one">有效</option>
                                                        <option value="two" disabled="disabled">红冲</option>
                                                        <option value="three">无效</option>
                                                    </select>
                                                </div>

                                            </div>

                                            <strong>
                                                单据标签
                                            </strong> <br />

                                            <a href="#" class="btn btn-sm btn-outline-info mt-1"><i class="feather-sm" data-feather="tag"></i>
                                                资产单据</a>
                                            <a href="#" class="btn btn-sm btn-outline-info mt-1"><i class="feather-sm" data-feather="tag"></i>
                                                回款单据</a>
                                            <hr />
                                            <div class="media pl-2">
                                                <div class="media-body">
                                                    <text class="text-primary">发票细单</text>
                                                    <div class="row no-gutters mt-1 border text-sm text-muted p-2 mt-1">

                                                        <table class="table table-sm my-2">
                                                            <tr>
                                                                <th>细单金额</th>
                                                                <th style="width:15%">商品名称</th>
                                                                <th style="width:15%">商品数量</th>


                                                            </tr>
                                                            <tbody>
                                                                <tr>
                                                                    <td>20000</td>
                                                                    <td>飞机票</td>
                                                                    <th>1</th>

                                                                </tr>
                                                                <tr>
                                                                    <td>8,000,000</td>
                                                                    <td>机场建设费</td>
                                                                    <td>1</td>
                                                                </tr>




                                                            </tbody>
                                                        </table>

                                                    </div>


                                                    <small class="text-muted">2021-02-01</small>

                                                    <br />

                                                </div>
                                            </div>
                                            <div class="media pl-2">
                                                <div class="media-body">
                                                    <text class="text-primary">发票影像</text>
                                                    <div class="row no-gutters mt-1 border text-sm text-muted p-2 mt-1">
                                                        <div class="col-6 col-md-4 col-lg-4 col-xl-3">
                                                            <img src="img/attachment/invoice1.png" class="img-fluid pr-2" alt="Unsplash" height="28">
                                                        </div>
                                                    </div>
                                                    <div class="mt-2">
                                                        <span class="btn btn-primary"><i class="fas fa-upload"></i> 上传</span>
                                                    </div>
                                                    <br />

                                                </div>
                                            </div>

                                        </div>
                                    </div>






                                </div>
                            </div>

                        </div>
                        <div class="col-md-4 col-xl-3">
                            <div class="card">
                                <div class="card-header">

                                    <h5 class="card-title mb-0">单据回款信息</h5>
                                </div>
                                <div class="card-body">


                                    <table class="table table-sm my-2">
                                        <tbody>

                                            <tr>
                                                <th>累计回款金额</th>
                                                <td>8,000,000</td>
                                            </tr>
                                            <tr>
                                                <th>累计回款笔数</th>
                                                <td>3</td>
                                            </tr>
                                            <tr>
                                                <th>未核销金额</th>
                                                <td>1,000,000</td>
                                            </tr>

                                            <tr>
                                                <th>回款状态</th>
                                                <td><span class="badge badge-success">正常</span></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <hr />

                                    <p>回款流水</p>


                                    <ul class="timeline">
                                        <li class="timeline-item">
                                            <strong>2,000,000</strong>
                                            <span class="float-right text-muted text-sm">2021-01-01</span>
                                            <p>自动处理</p>
                                        </li>
                                        <li class="timeline-item">
                                            <strong>3,000,000</strong>
                                            <span class="float-right text-muted text-sm">2021-02-01</span>
                                            <p>自动处理</p>
                                        </li>
                                        <li class="timeline-item">
                                            <strong>3,000,000</strong>
                                            <span class="float-right text-muted text-sm">2021-02-01</span>
                                            <p>人工核销</p>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </main>

        </div>

    </div>

    <script src="js/app.js"></script>

    <script src="js/initDataTables.js"></script>
    <script src="js/libs/handlebars/handlebars.min-v4.7.7.js"></script>

    <script src="js/initMenuMessageAlert.js"></script>

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {

            initSidebarMenu(2, 1, 0)

            var tpl_siderbar = $("#script_menu").html();
            var template_sdb = Handlebars.compile(tpl_siderbar);
            var content = template_sdb(menu_json_data);
            $("#sidebar-menu").html(content)

            //模版渲染
            var tpl_alerts = $("#script_alerts").html();
            var template_alt = Handlebars.compile(tpl_alerts);
            var content = template_alt(alerts);
            $("#alerts").html(content)



            //模版渲染
            var tpl_messages = $("#script_messages").html();
            var template_msg = Handlebars.compile(tpl_messages);
            var content = template_msg(messages);
            $("#messages").html(content)



        });
    </script>

</body>

</html>